<template>
  <div>
    <div class="banner" ref="banner" :style="{'height':bannerHeight+'px'}">
      <slider class="sliders" ref="slider" :pages="pages" :sliderinit="sliderinit">
        <!-- 设置loading,可自定义 -->
        <!-- <div slot="loading">loading...</div> -->
      </slider>
      <div class="top-bar">
        <div class="location fl" >
          <!--<span>{{location.value}}</spann>-->
          <select v-model="location" ref='cities' @change="switchCity">
            <option :value="city.value" v-for="city in cityList" >{{city.key}}</option>
          </select>
        </div>
        <div class="search fl">
          <input type="text" name="" placeholder="输入你想要的公司或职位信息" @click="goToSearch()">
        </div>
      </div>
    </div>
    <div class="point" ref="elememt">
      <ul class="pointList">
        <li v-for="(item,index) in point" :class="{active:index == num}" @click="tab(index)">
          <img :src="item.image"/>
          <span>{{ item.message }}</span>
          <div class="horn"></div>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
  import slider from 'vue-concise-slider'// import slider components
  import {showSelOption} from '@/common/utils'
  import {ads} from '@/controller'
  import Bus from '../../controller/bus.js'

  export default {
    name: 'homeHeader',
    data() {
      return {
        adTopStart: 0,
        adJob: {},
        location: '南京',
        maxSalary: 0,
        cityList: [{
          key: '南京',
          value: '南京'
        }, {
          key: '昆山',
          value: '昆山'
        }, {
          key: '滁州',
          value: '滁州'
        },
          {
            key: '合肥',
            value: '合肥'
          },
          {
            key: '无锡',
            value: '无锡'
          },
          {
            key: '常州',
            value: '常州'
          },
          {
            key: '苏州',
            value: '苏州'
          },
          {
            key: '无锡',
            value: '无锡'
          },
          {
            key: '上海',
            value: '上号'
          },
          {
            key: '云南',
            value: '云南'
          }],
        pages: [],
        sliderinit: {
          currentPage: 0,
          autoplay: 4000,
          loop: true,
          infinite: 1,
          slidesToScroll: 1,
          timingFunction: 'ease',
          duration: 1000,
          preventDocumentMove: false
        },
        point: [
          {image: '/static/wechat/images/point1.png', message: '高返费'},
          {image: '/static/wechat/images/point2.png', message: '小时工'},
          {image: '/static/wechat/images/point3.png', message: '临时工'},
          {image: '/static/wechat/images/point4.png', message: '加盟'}
        ],
        num: '0',
        index: 0,
        bannerHeight:''
      }
    },
    created() {
      this.location = this.cityList[0].value;
    },
    mounted() {
      this.handleCompanyPic();
      let docWidth = this.$refs.banner.clientWidth;
      this.bannerHeight = docWidth/2
    },
    components: {
      "slider": slider
    },
    methods: {
      tab: function (index) {
        if (index === 3) {
          this.$router.push({
            path: `/cooperation`,
          })
          return
        }
        this.num = index;
        Bus.$emit('switchType', index);
      },
      goToSearch() {
        this.$router.push({
          path: `/search`,
        })
      },
      selectCity() {
        showSelOption(this.$refs.cities);
      },
      switchCity(e) {
        console.log(e)
        this.$emit('switchCity', this.location);
        // this.getAdJob().then(() => {
        //   eventBus.$emit('changeCity', this.location);
        // }).catch(() => {
        //   this.$toast.center('该城市还没有职位');
        //   setTimeout(() => {
        //     this.location = this.cityList[0];
        //   }, 1000)
        // });
      },
      handleCompanyPic() {
        let height = this.$refs.elememt.offsetHeight + 72;
        // console.log(height);
        Bus.$emit('height', height);
        //请求广告位列表
        ads().then((res) => {
          if (res.code === 0) {
            if (res.data.length != 0) {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i] !== null) {
                  this.pages.push({
                    html: '<img src="' + encodeURI(res.data[i].adImg) + '">'
                  })
                }
              }
            }
          } else {
            this.$toast.center('get ads error')
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .point .pointList li:last-child .horn {
    opacity: 0;
  }
</style>
